<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="description" content="Oellfare - Charity Template">
    <meta name="author" content="">

    <!-- Page Title -->
    <title>链上善行公益-公益项目</title>

    <!-- Favicon and Touch Icons -->
    <link href="front/images/logo1.png" rel="shortcut icon" type="image/jpg">
    <!-- Lead Style -->
    <link href="front/css/style.css" rel="stylesheet" type="text/css">
    <script src="common/js/jquery.min.js"></script>
    <link href="front/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="common/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="front/css/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="common/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="common/css/bootstrap.css" />
    <!-- 引入样式 -->

    <!-- 引入CSS 按钮样式 -->
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        /* 按钮样式 */
        .button {
            display: inline-block;
            position: relative;
            z-index: 1;
            overflow: hidden;
            text-decoration: none;
            font-family: sans-serif;
            font-weight: 600;
            font-size: 2em;
            padding: 0.75em 1em;
            color: #000000;
            border: 0.15em solid #6699CC;
            border-radius: 2em;
            transition: 4s;
        }

        .button:before,
        .button:after {
            content: "";
            position: absolute;
            top: -1.5em;
            z-index: -1;
            width: 200%;
            aspect-ratio: 1;
            border: none;
            border-radius: 40%;
            background-color: #6699CC;
            transition: 4s;
        }

        .button:before {
            left: -80%;
            transform: translate3d(0, 5em, 0) rotate(-340deg);
        }

        .button:after {
            right: -80%;
            transform: translate3d(0, 5em, 0) rotate(390deg);
        }

        .button:hover,
        .button:focus {
            color: white;
            transition-delay: 0.6s;
        }

        .button:hover:before,
        .button:hover:after,
        .button:focus:before,
        .button:focus:after
        {
            transform: none;
            background-color: #6699CC;
        }
        <!-- 实现了聚焦状态下的按钮无边框 -->
        .button:focus {
            outline: none;
        }
        .power_button1{
            font-size: 12px;
            font-weight: 500;
            padding: 6px 25px;
            background: transparent;
            color: #000000;
            border: 2px solid #000000;
            border-radius: 30px;
            line-height: 24px;
        }
    </style>
</head>
<!--PreLoader-->
<div class="preloader">
    <div class="preloader-inner">
        <div class="siteloading-preloader"></div>
    </div>
</div>
<!--PreLoader Ends-->
<body>
<div id="app">
    <div th:replace="commons/front-bar::#header(currUri='projects',links=${links})"></div>

    <div class="main-wrapper">

        <div class="section causes bg_color_1">
            <div class="container">
               <!-- <div class="power_heading_wrapper text-center">
                    <div class="power_heading_icon"><img src="front/images/header_icon1.png" alt=""></div>
                    <h1 class="power_title ">最新的公益项目</h1>
                    <div class="power_title_line"></div>
                </div>-->
                <div class="button-container" style="margin-left: 260px">
                    <a href="#" class="button" style="position:relative;left: -100px" id="walfare" th:onclick="w_cl()">社会福利</a>
                    <a href="#" class="button" id="develop" th:onclick="t_cl()">教育发展</a>
                    <a href="#" class="button" style="position:relative;right: -100px" id="protect" th:onclick="p_cl()">环境保护</a>
                </div>
                <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                <div class="row" style="margin-top: 30px">
                    <div class="col-lg-4 col-md-6" th:each="project:${projects}">
                        <div class="power_causes">
                            <div class="power_causes_wrapper">
                                <div class="power_causes_image">
                                    <img class="primary_img" style="height: 250px" th:src="${project.img}" alt="">
<!--                                    <div class="power_highlight_tag" th:text="${project.theme}"></div>-->
                                </div>
                                <div class="power_causes_content">
                                    <h4 th:text="${project.name}"></h4>
                                    <div class="power_progress_content">
                                        <div class="power_progress_bar_back">
                                        </div>
                                        <div class="power_progress_amount">
                                            <span>赞助： [[${project.sponsor}]]</span>
                                            <span>发布时间： [[${#dates.format(project.gmtModified,'yyyy年MM月dd日')}]]</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="power_button_group">
                                    <a th:href="@{project(id=${project.id})}" class="power_button1 effect_1" style="  text-decoration: none;
    color: inherit;">
                                        <span class="button_value">查看详细</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
<!--                <div class="pagination-div">-->
<!--                    <ul class="pagination">-->
<!--                        <li th:if="${page != 1}">-->
<!--                            <a class="disabled" href="projects?page=1">第一页</a>-->
<!--                        </li>-->
<!--                        <li><a class="page-number" th:href="@{projects(page=${page -1})}" th:if="${page > 2}">[[${page-1}]]</a></li>-->
<!--                        <li><a class="page-number current" href="javaScript:Void(0)">[[${page}]]</a></li>-->
<!--                        <li><a class="page-number" th:href="@{projects(page=${page +1})}" th:if="${page < (totalPage -1)}">[[${page + 1}]]</a></li>-->

<!--                        <li th:if="${page != totalPage}"><a th:href="@{projects(page=${totalPage})}">最后一页</a></li>-->
<!--                        <li>共：[[${totalPage}]]页</li>-->
<!--                    </ul>-->
<!--                </div>-->
            </div>
        </div>
    </div>

    <div th:replace="commons/front-bar::#footer"></div>
</div>

<!-- All JavaScript Files
================================================== -->

<script src="front/js/bootstrap.min.js"></script>
<script src="front/js/menu.js"></script>
<script src="front/js/select2.js"></script>
<script src="front/js/jquery.fancybox.min.js"></script>
<script src="front/js/owl.carousel.min.js"></script>
<script src="front/js/spectragram.min.js"></script>
<script src="front/js/wow.js"></script>
<script src="front/js/custom.js"></script>
<script src="front/js/vue.js"></script>
<!-- import JavaScript -->
<script src="front/js/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false
            }
        },
    })
</script>
<script>
    var kind = localStorage.getItem("kind");
    if(kind !== null) {
        var kd = '#' + kind;
        var element = document.querySelector(kd)
        element.style.outline = 'none'
        element.click()
        element.focus()
        localStorage.removeItem("kind")
    }
    localStorage.setItem('url',window.location.href);
    //来进行监视数据
    var surveyRatingSelect = document.getElementById('surveyRating');
    surveyRatingSelect.addEventListener('change', function() {
    });
    function ToSatisFac(){
        $.ajax({
            url: "/blockchain-kindness/donations/addSatisfaction",
            type: "post",
            data: {
                grade : surveyRatingSelect.value
            },
            success: function (data) {
                if(data.message === '投票成功') {
                    $('#surveyModal').modal('hide'); // 关闭模态对话框
                    alert("感谢您的反馈")
                }else{
                    alert("您没有输入合适的信息")
                }
            },
            error: function (data) {
            }
        });
    }
    //定义三个点击时间

    //定义当前选择所属的类
    var cur_kind;
    function w_cl(){
        //仅测试
        cur_kind = "社会救助与福利";
        $.ajax({
            url : "/blockchain-kindness/Allproject",
            type : "GET",
            success(resp){
                const rowElement = document.querySelector('.row');
                rowElement.innerHTML = '';
                const filteredProjects = resp.data.filter(project => project.purposeName === cur_kind);
                function createProjectDOM(project) {
                    const rootDiv = document.createElement('div');
                    rootDiv.classList.add('col-lg-4', 'col-md-6');
                    const powerCauses = document.createElement('div');
                    powerCauses.classList.add('power_causes');
                    const powerCausesWrapper = document.createElement('div');
                    powerCausesWrapper.classList.add('power_causes_wrapper');
                    const powerCausesImage = document.createElement('div');
                    powerCausesImage.classList.add('power_causes_image');
                    const img = document.createElement('img');
                    img.classList.add('primary_img');
                    img.style.height = '250px';
                    img.src = project.img;
                    img.alt = '';
                    const powerHighlightTag = document.createElement('div');
                    // powerHighlightTag.classList.add('power_highlight_tag');
                    // powerHighlightTag.textContent = project.theme;
                    powerCausesImage.appendChild(img);
                    powerCausesImage.appendChild(powerHighlightTag);
                    const powerCausesContent = document.createElement('div');
                    powerCausesContent.classList.add('power_causes_content');
                    const h4 = document.createElement('h4');
                    h4.textContent = project.name;
                    const powerProgressContent = document.createElement('div');
                    powerProgressContent.classList.add('power_progress_content');
                    const powerProgressBarBack = document.createElement('div');
                    powerProgressBarBack.classList.add('power_progress_bar_back');
                    const powerProgressAmount = document.createElement('div');
                    powerProgressAmount.classList.add('power_progress_amount');
                    const sponsorSpan = document.createElement('span');
                    sponsorSpan.textContent = `赞助：${project.sponsor}`;
                    const dateSpan = document.createElement('span');
                    dateSpan.textContent = `发布时间：${project.gmtModified}`;
                    powerProgressAmount.appendChild(sponsorSpan);
                    powerProgressAmount.appendChild(dateSpan);
                    powerProgressContent.appendChild(powerProgressBarBack);
                    powerProgressContent.appendChild(powerProgressAmount);
                    powerCausesContent.appendChild(h4);
                    powerCausesContent.appendChild(powerProgressContent);
                    const powerButtonGroup = document.createElement('div');
                    powerButtonGroup.classList.add('power_button_group');
                    const a = document.createElement('a');
                    a.href = `project?id=${project.id}`;
                    a.style.textDecoration = 'none';
                    a.style.color = 'inherit'
                    a.classList.add('power_button1', 'effect_1');
                    const buttonValueSpan = document.createElement('span');
                    buttonValueSpan.classList.add('button_value');
                    buttonValueSpan.textContent = '查看详细';
                    a.appendChild(buttonValueSpan);
                    powerButtonGroup.appendChild(a);
                    powerCausesWrapper.appendChild(powerCausesImage);
                    powerCausesWrapper.appendChild(powerCausesContent);
                    powerCauses.appendChild(powerCausesWrapper);
                    powerCauses.appendChild(powerButtonGroup);
                    rootDiv.appendChild(powerCauses);
                    return rootDiv;
                }
                // function formatDate(date) {
                //     const year = date.getYear();
                //     const month = String(date.getMonth() + 1).padStart(2, '0');
                //     const day = String(date.getDate()).padStart(2, '0');
                //     return `${year}年${month}月${day}日`;
                // }

                // 遍历项目数据，为每个项目创建DOM结构并添加到容器中
                filteredProjects.forEach(project => {
                    const projectElement = createProjectDOM(project);
                    rowElement.appendChild(projectElement);
                });
            }
        })
    }
    function t_cl() {
        cur_kind = "教育与文化发展";
        $.ajax({
            url: "/blockchain-kindness/Allproject",
            type: "GET",
            success(resp) {
                const rowElement = document.querySelector('.row');
                rowElement.innerHTML = '';
                const filteredProjects = resp.data.filter(project => project.purposeName === cur_kind);

                function createProjectDOM(project) {
                    const rootDiv = document.createElement('div');
                    rootDiv.classList.add('col-lg-4', 'col-md-6');
                    const powerCauses = document.createElement('div');
                    powerCauses.classList.add('power_causes');
                    const powerCausesWrapper = document.createElement('div');
                    powerCausesWrapper.classList.add('power_causes_wrapper');
                    const powerCausesImage = document.createElement('div');
                    powerCausesImage.classList.add('power_causes_image');
                    const img = document.createElement('img');
                    img.classList.add('primary_img');
                    img.style.height = '250px';
                    img.src = project.img;
                    img.alt = '';
                    const powerHighlightTag = document.createElement('div');
                    /*powerHighlightTag.classList.add('power_highlight_tag');
                    powerHighlightTag.textContent = project.theme;*/
                    powerCausesImage.appendChild(img);
                    powerCausesImage.appendChild(powerHighlightTag);
                    const powerCausesContent = document.createElement('div');
                    powerCausesContent.classList.add('power_causes_content');
                    const h4 = document.createElement('h4');
                    h4.textContent = project.name;
                    const powerProgressContent = document.createElement('div');
                    powerProgressContent.classList.add('power_progress_content');
                    const powerProgressBarBack = document.createElement('div');
                    powerProgressBarBack.classList.add('power_progress_bar_back');
                    const powerProgressAmount = document.createElement('div');
                    powerProgressAmount.classList.add('power_progress_amount');
                    const sponsorSpan = document.createElement('span');
                    sponsorSpan.textContent = `赞助：${project.sponsor}`;
                    const dateSpan = document.createElement('span');
                    dateSpan.textContent = `发布时间：${project.gmtModified}`;
                    powerProgressAmount.appendChild(sponsorSpan);
                    powerProgressAmount.appendChild(dateSpan);
                    powerProgressContent.appendChild(powerProgressBarBack);
                    powerProgressContent.appendChild(powerProgressAmount);
                    powerCausesContent.appendChild(h4);
                    powerCausesContent.appendChild(powerProgressContent);
                    const powerButtonGroup = document.createElement('div');
                    powerButtonGroup.classList.add('power_button_group');
                    const a = document.createElement('a');
                    a.href = `project?id=${project.id}`;
                    a.style.textDecoration = 'none';
                    a.style.color = 'inherit'
                    a.classList.add('power_button1', 'effect_1');
                    const buttonValueSpan = document.createElement('span');
                    buttonValueSpan.classList.add('button_value');
                    buttonValueSpan.textContent = '查看详细';
                    a.appendChild(buttonValueSpan);
                    powerButtonGroup.appendChild(a);
                    powerCausesWrapper.appendChild(powerCausesImage);
                    powerCausesWrapper.appendChild(powerCausesContent);
                    powerCauses.appendChild(powerCausesWrapper);
                    powerCauses.appendChild(powerButtonGroup);
                    rootDiv.appendChild(powerCauses);
                    return rootDiv;
                }

                // function formatDate(date) {
                //     const year = date.getYear();
                //     const month = String(date.getMonth() + 1).padStart(2, '0');
                //     const day = String(date.getDate()).padStart(2, '0');
                //     return `${year}年${month}月${day}日`;
                // }

                // 遍历项目数据，为每个项目创建DOM结构并添加到容器中
                filteredProjects.forEach(project => {
                    const projectElement = createProjectDOM(project);
                    rowElement.appendChild(projectElement);
                });
            }
        })
    }
        function p_cl() {
            cur_kind = "环境保护与可持续性发展";
            $.ajax({
                url: "/blockchain-kindness/Allproject",
                type: "GET",
                success(resp) {
                    const rowElement = document.querySelector('.row');
                    rowElement.innerHTML = '';
                    const filteredProjects = resp.data.filter(project => project.purposeName === cur_kind);

                    function createProjectDOM(project) {
                        const rootDiv = document.createElement('div');
                        rootDiv.classList.add('col-lg-4', 'col-md-6');
                        const powerCauses = document.createElement('div');
                        powerCauses.classList.add('power_causes');
                        const powerCausesWrapper = document.createElement('div');
                        powerCausesWrapper.classList.add('power_causes_wrapper');
                        const powerCausesImage = document.createElement('div');
                        powerCausesImage.classList.add('power_causes_image');
                        const img = document.createElement('img');
                        img.classList.add('primary_img');
                        img.style.height = '250px';
                        img.src = project.img;
                        img.alt = '';
                        const powerHighlightTag = document.createElement('div');
                        /*powerHighlightTag.classList.add('power_highlight_tag');
                        powerHighlightTag.textContent = project.theme;*/
                        powerCausesImage.appendChild(img);
                        powerCausesImage.appendChild(powerHighlightTag);
                        const powerCausesContent = document.createElement('div');
                        powerCausesContent.classList.add('power_causes_content');
                        const h4 = document.createElement('h4');
                        h4.textContent = project.name;
                        const powerProgressContent = document.createElement('div');
                        powerProgressContent.classList.add('power_progress_content');
                        const powerProgressBarBack = document.createElement('div');
                        powerProgressBarBack.classList.add('power_progress_bar_back');
                        const powerProgressAmount = document.createElement('div');
                        powerProgressAmount.classList.add('power_progress_amount');
                        const sponsorSpan = document.createElement('span');
                        sponsorSpan.textContent = `赞助：${project.sponsor}`;
                        const dateSpan = document.createElement('span');
                        dateSpan.textContent = `发布时间：${project.gmtModified}`;
                        powerProgressAmount.appendChild(sponsorSpan);
                        powerProgressAmount.appendChild(dateSpan);
                        powerProgressContent.appendChild(powerProgressBarBack);
                        powerProgressContent.appendChild(powerProgressAmount);
                        powerCausesContent.appendChild(h4);
                        powerCausesContent.appendChild(powerProgressContent);
                        const powerButtonGroup = document.createElement('div');
                        powerButtonGroup.classList.add('power_button_group');
                        const a = document.createElement('a');
                        a.href = `project?id=${project.id}`;
                        a.style.textDecoration = 'none';
                        a.style.color = 'inherit'
                        a.classList.add('power_button1', 'effect_1');
                        const buttonValueSpan = document.createElement('span');
                        buttonValueSpan.classList.add('button_value');
                        buttonValueSpan.textContent = '查看详细';
                        a.appendChild(buttonValueSpan);
                        powerButtonGroup.appendChild(a);
                        powerCausesWrapper.appendChild(powerCausesImage);
                        powerCausesWrapper.appendChild(powerCausesContent);
                        powerCauses.appendChild(powerCausesWrapper);
                        powerCauses.appendChild(powerButtonGroup);
                        rootDiv.appendChild(powerCauses);
                        return rootDiv;
                    }

                    // function formatDate(date) {
                    //     const year = date.getYear();
                    //     const month = String(date.getMonth() + 1).padStart(2, '0');
                    //     const day = String(date.getDate()).padStart(2, '0');
                    //     return `${year}年${month}月${day}日`;
                    // }

                    // 遍历项目数据，为每个项目创建DOM结构并添加到容器中
                    filteredProjects.forEach(project => {
                        const projectElement = createProjectDOM(project);
                        rowElement.appendChild(projectElement);
                    });
                }
            })
    }
    $.ajax({
        url : "/blockchain-kindness/Allproject",
        type : "GET",
        success(resp){
            // var element = document.querySelector('#walfare')
            // element.click()
        }
    })


</script>
</body>
</html>